<template>
  <a-modal
    v-model:visible="visible"
    title="新增权限"
    @ok="handleOk"
    ok-text="确定"
    cancel-text="取消"
  >
    <a-form
      ref="formRef"
      :model="modelRef"
      :rules="rulesRef"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <a-form-item label="权限名称" name="name">
        <a-input v-model:value="modelRef.name" />
      </a-form-item>
      <a-form-item label="菜单标识" name="path">
        <a-input v-model:value="modelRef.path" />
      </a-form-item>
      <a-form-item label="排序" name="sort">
        <a-input-number v-model:value="modelRef.sort" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
import { addAuth } from "@/api/menu/merch/List";
import { toRefs, toRaw, reactive, defineComponent } from "vue";
import { notice } from "@/config";
export default defineComponent({
  setup(props, { emit }) {
    let state = reactive({
      visible: false,
      formRef: {},
      item:{},
    })
    let modelRef = reactive({
      name: "",
      path: "",
      sort: 100,
      merch_menu_id:0,
    })
    let rulesRef = reactive({
      name: [
        {
          required: true,
          message: "请输入权限名称",
        },
      ],
      path: [
        {
          required: true,
          message: "请输入权限标识",
        },
      ],
      sort: [
        {
          required: true,
          message: "请输入排序值",
        },
      ],
    })
    
    // 显示对话框
    const show = (item) => {
      state.item = item
      state.visible = state.visible ? false : true
      modelRef.name = ''
      modelRef.path = ''
      modelRef.merch_menu_id = item.merch_menu_id
    }

    const handleOk = () => {
      state.formRef.validate().then(() => {
        addAuth(toRaw(modelRef)).then((res) => {
          emit("okCallback", res)
          notice(res.status == 200 ? "success" : "error", res.message)
          state.visible = false
        })
      })
    }

    return {
      show,
      handleOk,
      ...toRefs(state),
      labelCol: {
        span: 6,
      },
      wrapperCol: {
        span: 16,
      },
      modelRef,
      rulesRef,
    };
  },
});
</script>
